import { useState, useEffect, useRef } from "react";
import axios from "axios";

const Chapter8 = (props) => {
    const { title } = props;
    const [info, setInfo] = useState({});
    const audioRef = useRef(null);
    useEffect(() => {
        getData();
    }, []);
    // 请求数据
    const getData = async () => {
        const res = await axios.get(
            "https://api.oioweb.cn/api/common/OneDayEnglish"
        );
        setInfo(res.data.result);
    };
    const playAudio = () => {
        audioRef.current.play();
    };
    return (
        <div className='wrapper wrapper8'>
            <div className='page-header'>
                <h3>{title}</h3>
            </div>
            <div className='page-content'>
                <ul className='list-group'>
                    <li className='list-group-item'>内容：{info.content}</li>
                    <li className='list-group-item'>描述：{info.note}</li>
                    <li className='list-group-item'>
                        <audio ref={audioRef} src={info.tts}></audio>
                        <button
                            className='btn btn-block btn-info'
                            onClick={playAudio}
                        >
                            播放
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Chapter8;
